* {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
  overflow: hidden;


}

.outer {
  width: 100%;
  height: 100%;
  //background-color: fuchsia;

  .total-title {
    height: 5%;
    background-color: rgb(13, 90, 177);
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .up {
    width: 100%;
    //background-color: aqua;
    height: 65%;
    //padding: 0px 25px 0px 25px;
    display: flex;
    justify-content: space-between;

    .left {
      width: 7%;
      margin-left: 25px;
      height: 100%;
      //background-color: orange;
      display: flex;
      flex-flow: column;
      justify-content: space-between;

      .item {
        width: 100%;
        height: 30%;
        //background-color: #193ae3;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        font-size: 18px;

        .down-title {
          color: rgb(245, 147, 22);
        }
      }
    }

    .mid {
      width: 50%;
      height: 100%;
      //background-color: orange;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .right {
      width: 33%;
      height: 100%;
      margin-right: 25px;
      //background-color: #1ac932;
      display: flex;
      flex-flow: column;
      justify-content: space-evenly;

      .item {
        width: 100%;
        height: 49%;
        //background-color: #193ae3;
        position: relative;

        span {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 10;
          font-size: 16px;
          font-weight: bold;
        }

        .efficiency1, .efficiency2 {
          width: 100%;
          height: 100%;

        }
      }
    }
  }

  .down {
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: space-between;

    .item {
      height: 100%;
      width: 19%;
      //background-color: yellow;
      font-size: 12px;

      .title {
        width: 100%;
        height: 10%;
        //background-color: green;
        background-color: rgba(46, 229, 206, .8);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 17px;
        font-weight: bold;

        &:hover {
          cursor: pointer;
        }
      }

      .up {
        width: 100%;
        height: 15%;
        display: flex;
        justify-content: space-between;


        .item {
          //background-color: #d2d0d0;
          width: 30%;
          display: flex;
          align-items: center;
          flex-flow: column;
          justify-content: center;

          .down-title {
            font-weight: bold;
          }

          &:nth-child(2) .down-title, &:nth-child(3) .down-title {
            color: rgb(2, 249, 0);
          }
        }


      }

      .down {
        width: 100%;
        height: 75%;
      }
    }
  }

  .map-tip {
    width: 0%;
    height: 0%;
    //background-color: #00BFFF;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    transition: 1s;

    .map-title {
      height: 5%;
      width: 100%;
      background-color: #f59316;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        cursor: pointer;
      }
    }

    .map-container {
      height: 95%;
      width: 100%;
      //background-color: #02f900;
      background-color: rgba(245,245,245);
      .BMapLabel{
        color: black;
        //display: none!important;
      }
    }
  }


}


